<template>
  <div class="kg-hot">
    <header class="kg-hot-header">知识热点</header>
    <section class="kg-hot-block flex">
      <div class="kg-hot-item w-1/2">
        <div class="kg-hot-item-header flex">
          知识实例总量
          <i class="iconfont icon_info_fill text-[#BFBFBF] ml-1"></i>
        </div>
        <div class="kg-hot-item-body flex items-center">
          <div class="number">12321</div>
          <div class="percentage flex">
            <i class="iconfont icon_data_arrowdown"></i> 11.2
          </div>
        </div>
      </div>
      <div class="kg-hot-item w-1/2">
        <div class="kg-hot-item-header flex">
          用户收藏知识数
          <i class="iconfont icon_info_fill text-[#BFBFBF] ml-1"></i>
        </div>
        <div class="kg-hot-item-body flex items-center">
          <div class="number">12321</div>
          <div class="percentage flex">
            <i class="iconfont icon_data_arrowup"></i> 11.2
          </div>
        </div>
      </div>
    </section>
    <el-table
      class="my-6"
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{ backgroundColor: '#DCDDE2', color: '#222222' }"
    >
      <el-table-column width="80" label="序号" type="index" />
      <el-table-column prop="name" label="知识名称" />
      <el-table-column prop="collectNum" label="收藏" width="180" />
      <el-table-column prop="trend" label="趋势" width="180" />
    </el-table>
    <div class="flex justify-end my-4">
      <el-pagination
        v-model:current-page="currentPage"
        :background="false"
        :pager-count="5"
        layout=" prev, pager, next"
        :total="100"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "kg-hot",
});
const tableData = [
  {
    name: "search keywords01",
    collectNum: "1123",
    trend: "23%",
  },
  {
    name: "search keywords01",
    collectNum: "1123",
    trend: "23%",
  },
  {
    name: "search keywords01",
    collectNum: "1123",
    trend: "23%",
  },
  {
    name: "search keywords01",
    collectNum: "1123",
    trend: "23%",
  },
  {
    name: "search keywords01",
    collectNum: "1123",
    trend: "23%",
  },
  {
    name: "search keywords01",
    collectNum: "1123",
    trend: "23%",
  },
  {
    name: "search keywords01",
    collectNum: "1123",
    trend: "23%",
  },
  {
    name: "search keywords01",
    collectNum: "1123",
    trend: "23%",
  },
  {
    name: "search keywords01",
    collectNum: "1123",
    trend: "23%",
  },
  {
    name: "search keywords01",
    collectNum: "1123",
    trend: "23%",
  },
];
const currentPage = ref(1);
const handleCurrentChange = () => {};
</script>

<style scoped lang="scss">
.icon_data_arrowdown {
  color: #e84d4d;
}

.icon_data_arrowup {
  color: #00a854;
}

.kg-hot {
  width: 70%;
  padding: 16px;
  border: 1px solid #dcdde2;
  border-radius: 4px;

  .kg-hot-header {
    height: 24px;
    font-family: PingFangSC-Regular, "PingFang SC";
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #2b1dff;
  }

  .kg-hot-block {
    margin-top: 24px;

    .kg-hot-item:nth-of-type(1) {
      border-right: 1px solid #dcdde2;
    }
  }

  .kg-hot-item {
    height: 136px;
    padding: 16px;

    .kg-hot-item-header {
      height: 24px;
      margin-bottom: 25px;
      font-family: PingFangSC-Regular, "PingFang SC";
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      color: #222;
    }

    .kg-hot-item-body {
      line-height: 30px;

      .number {
        margin-right: 24px;
        font-family: DINPro-Bold, DINPro;
        font-size: 22px;
        font-weight: bold;
        color: #3a72de;
      }

      .percentage {
        font-family: PingFangSC-Regular, "PingFang SC";
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        color: #222;
      }
    }
  }
}
</style>
